<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 头部标题 -->
      <view class="card-header">
        <view class="logo">
          <text class="logo-icon">📚</text>
        </view>
        <view class="subtitle">欢迎回来，请登录您的账户</view>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 用户名输入框 -->
        <view class="input-group">
          <view class="input-wrapper">
            <text class="input-icon">👤</text>
            <input
                class="form-input"
                type="text"
                v-model="account"
                maxlength="30"
                placeholder="请输入用户名"
                placeholder-class="input-placeholder"
            />
            <view class="error-message" v-if="error.account">{{ error.account }}</view>
          </view>
        </view>

        <!-- 密码输入框 -->
        <view class="input-group">
          <view class="input-wrapper">
            <text class="input-icon">🔒</text>
            <input
                class="form-input"
                :password="true"
                v-model="password"
                maxlength="30"
                placeholder="请输入密码"
                placeholder-class="input-placeholder"
            />
            <view class="error-message" v-if="error.password">{{ error.password }}</view>
          </view>
        </view>

        <!-- 登录按钮 -->
        <view class="login-btn" @click="submitLogin" :class="{ 'loading': isLoading }">
          <text v-if="!isLoading" class="btn-text">立即登录</text>
          <text v-else class="btn-text">登录中...</text>
          <view v-if="isLoading" class="loading-spinner"></view>
        </view>

        <!-- 微信登录按钮 -->
        <view class="wechat-login-btn" @click="wechatLogin">
          <text class="wechat-icon">👤</text>
          <text class="wechat-text">微信快捷登录</text>
        </view>

        <!-- 底部提示 -->
        <view class="form-footer">
          <text class="footer-text">登录即表示同意用户协议和隐私政策</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import store from '@/store'
import * as LoginApi from '@/api/login'
import * as Verify from '@/utils/verify'

export default {
  props: {
    // 是否存在第三方用户信息
    isParty: {
      type: Boolean,
      default: () => false
    },
    // 第三方用户信息数据
    partyData: {
      type: Object
    }
  },

  data() {
    return {
      // 正在加载
      isLoading: false,
      // 账号
      account: '',
      // 密码
      password: '',
      // 错误信息
      error: {
        account: '',
        password: ''
      }
    }
  },

  methods: {
    // 表单验证
    formValidation() {
      this.clearErrors();

      if (!this.validateAccount(this.account)) {
        return false;
      }

      if (!this.validatePassword(this.password)) {
        return false;
      }

      return true;
    },

    // 验证账号
    validateAccount(str) {
      if (Verify.isEmpty(str)) {
        this.error.account = '请先输入您的用户名';
        return false;
      }

      if (str.length < 5) {
        this.error.account = '用户名不能少于5位';
        return false;
      }

      return true;
    },

    // 验证密码
    validatePassword(str) {
      if (Verify.isEmpty(str)) {
        this.error.password = '请先输入您的密码';
        return false;
      }

      if (str.length < 6) {
        this.error.password = '密码不能少于6位';
        return false;
      }

      return true;
    },

    // 清除错误信息
    clearErrors() {
      this.error = {
        account: '',
        password: ''
      };
    },

    // 确认登录
    submitLogin() {
      if (!this.formValidation()) {
        return false;
      }

      this.isLoading = true;

      const data = {
        username: this.account,
        password: this.password
      };

      store.dispatch('Login', data)
          .then(result => {
            if (result.code === 0) {
              // 登录成功，跳转到英文页面
              this.$toast('登录成功');
              uni.reLaunch({
                url: '/pages/book/english'
              });
            } else {
              this.$error(result.msg || '登录失败');
            }
          })
          .catch(error => {
            this.$error(error.msg || '登录失败');
          })
          .finally(() => this.isLoading = false);
    },

    // 微信登录
    wechatLogin() {
      const app = this;



      uni.showLoading({ title: '正在获取微信登录信息...' });

      // 获取微信登录凭证
      uni.login({
        provider: 'weixin',
        success: function(loginRes) {
          if (loginRes.code) {
            // 获取到code，发送到服务器换取用户信息
            app.handleWxAuthCallback(loginRes.code);
          } else {
            uni.hideLoading();
            app.$toast('微信登录失败，请重试');
          }
        },
        fail: function(err) {
          uni.hideLoading();
          app.$toast('微信登录失败，请重试');
          console.error('微信登录失败', err);
        }
      });
    },

    // 处理微信授权回调
    handleWxAuthCallback(code) {
      const app = this;

      if (!code) {
        app.$toast("抱歉，授权失败！");
        return false;
      }

      uni.showLoading({ title: '正在登录...' });

      // 提交到后端进行授权登录
      store.dispatch('MpWxLogin', {
        code: code,
        shareId: (uni.getStorageSync('shareId') ? uni.getStorageSync('shareId') : 0)
      })
          .then(result => {
            uni.hideLoading();
            console.log("222222"+result.code);
            if (result.code === 0) {
              // 显示登录成功
              app.$toast(result.message);
              // 跳转到用户页面
              uni.reLaunch({
                url: '/pages/user/index'
              });
            } else {
              store.dispatch('Logout');
              app.$toast(result.message || '登录失败，请重试');
            }
          })
          .catch(error => {
            uni.hideLoading();
            app.$toast("抱歉，授权失败！");
            console.error('微信授权登录失败', error);
          });
    },


  }
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  min-height: calc(100vh - var(--window-top));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

// 背景装饰
.bg-decoration {
  position: absolute;
  top: var(--window-top, 0);
  left: 0;
  width: 100%;
  height: calc(100% - var(--window-top, 0));
  pointer-events: none;

  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;

    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: 10%;
      left: 10%;
      animation-delay: 0s;
    }

    &.circle-2 {
      width: 150rpx;
      height: 150rpx;
      top: 60%;
      right: 15%;
      animation-delay: 2s;
    }

    &.circle-3 {
      width: 100rpx;
      height: 100rpx;
      bottom: 20%;
      left: 20%;
      animation-delay: 4s;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

// 登录卡片
.login-card {
  position: relative;
  width: 100%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 32rpx;
  padding: 60rpx 50rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
  animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 卡片头部
.card-header {
  text-align: center;
  margin-bottom: 60rpx;

  .logo {
    margin-bottom: 30rpx;

    .logo-icon {
      font-size: 80rpx;
      display: inline-block;
      animation: bounce 2s infinite;
    }
  }

  .subtitle {
    font-size: 28rpx;
    color: #718096;
    line-height: 1.5;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

// 表单样式
.login-form {
  .input-group {
    margin-bottom: 32rpx;

    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      background: #f7fafc;
      border: 2rpx solid #e2e8f0;
      border-radius: 16rpx;
      padding: 0 24rpx;
      height: 96rpx;
      transition: all 0.3s ease;

      &:focus-within {
        border-color: #667eea;
        background: #fff;
        box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
      }

      .input-icon {
        font-size: 32rpx;
        margin-right: 20rpx;
        color: #a0aec0;
      }

      .form-input {
        flex: 1;
        font-size: 32rpx;
        color: #2d3748;
        background: transparent;
        border: none;
        outline: none;

        &::placeholder {
          color: #a0aec0;
        }
      }

      .error-message {
        position: absolute;
        bottom: -24rpx;
        left: 0;
        font-size: 24rpx;
        color: #e53e3e;
      }
    }
  }

  // 登录按钮
  .login-btn {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
    }

    &.loading {
      background: #a0aec0;
      cursor: not-allowed;

      &:active {
        transform: none;
      }
    }

    .btn-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      letter-spacing: 2rpx;
    }

    .loading-spinner {
      width: 32rpx;
      height: 32rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      border-top: 4rpx solid #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-left: 16rpx;
    }
  }

  // 微信登录按钮
  .wechat-login-btn {
    width: 100%;
    height: 96rpx;
    background: #07c160;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
    }

    .wechat-icon {
      font-size: 36rpx;
      margin-right: 16rpx;
      color: #fff;
    }

    .wechat-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      letter-spacing: 1rpx;
    }
  }

  // 表单底部
  .form-footer {
    text-align: center;
    margin-top: 32rpx;

    .footer-text {
      font-size: 24rpx;
      color: #a0aec0;
      line-height: 1.5;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 输入框占位符样式
.input-placeholder {
  color: #a0aec0 !important;
  font-size: 28rpx !important;
}
</style>
